<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" name="mail" value="2300017621@qq.com" />
    <span></span>
  </body>
</html>

<script>
  let email = document
    .querySelector(`[name="mail"]`)
    .addEventListener("keyup", function () {
      reg = /^[\w-]+@([\w-]+\.)+(com|org|cc|cn|net)$/i;
      document.querySelector("span").innerHTML = reg.test(this.value)
        ? "正确 "
        : "错误";
    });
  // 2300017621@qq.com
  // /^[\w-]+@[\w-]+\.com|org\$/i; // 表示 com👈的是一个整体
  // let reg = /^[\w-]+@[\w-]+\.(com|org|cc|cn|net)$/i;
  // console.log(email.match(reg));

  // 238197232@hdcms.com.cn // 这种表示@后面是一组 \w - 一组或多组然后 . 紧接着 + 。它是在原子组后面+也就是说 @hddo.com.cn
  // let reg1 = /^[\w-]+@([\w-]+\.)+(com|org|cc|cn|net)$/i;
</script>
